import { VuexModule, Module, Mutation, Action } from "vuex-module-decorators";

//声明接口
interface PostEntity {
  comments: string[];
}

@Module
export default class App extends VuexModule {
  //App为模块名

  posts: PostEntity[] = [];

  //相当于;

  //  state: {
  //     posts: []
  //   }

  get totalComments(): number {
    return this.posts
      .filter((post) => {
        return post.comments && post.comments.length;
      })
      .reduce((sum, post) => {
        return sum + post.comments.length;
      }, 0);
  }

  //   相当于

  //   getters: {
  //     totalComments: (state) => {
  //       return state.posts
  //         .filter((post) => {
  //           return post.comments && post.comments.length
  //         })
  //         .reduce((sum, post) => {
  //           return sum + post.comments.length
  //         }, 0)
  //     }
  //   }

  @Mutation
  updatePosts(posts: PostEntity[]) {
    this.posts = posts;
  }

  //相当于

  //   mutations: {
  //       updatePosts(state,posts){
  //         state.posts=posts
  //     }
  //   }

  @Action({ commit: "updatePosts" })
  async fetchPosts() {
    return setTimeout(() => {
      return console.log("+++");
    }, 1000);
  }

  //相当于

  //   actions: {
  //       fetchPosts(context){
  //     const payload=setTimeout(() => {
  //      return console.log("+++");
  //     }, 1000);
  //      context.commit('updatePosts',payload)
  //     }
  //   };
}
